import { defineComponent, h } from "vue"
import { getValueByModel, setValueByModel } from "./../util"
import { useEditComponents, useEditComponentOptions  } from "./hooks"


export const SelectComponent = defineComponent (
    (props: CellProps) => {
        const { inputRef, visible, visibleComponent } = useEditComponents(props)
        const value = getValueByModel(props.column.dataIndex, props.record)
        visibleComponent()

        return () => h(
            'select',
            {
                ref: inputRef,
                class: { 'edit-control-components': 1, visible: visible.value  },
                value: value,
                onChange: (event: InputEvent) => setValueByModel(props.column.dataIndex, props.record, event?.target?.value),
            },
            props.column.options?.map((option) => {
                return h(
                    'option', 
                    { 
                        ...option,
                        value: option.value, 
                        selected: option.value === value,
                    }, 
                    option.label
                )
            })
        )
    },
    useEditComponentOptions()
)